<template>
  <div class="container">
    <custom-header title="巡检场景详情"></custom-header>
    <div class="content">
      <div class="top">
        <div class="item_list">
          <div class="item"
               v-for="(item,index) in topList"
               :key="index">
            {{ item.label }}： <span class="prop">{{ topValue[item.prop] }}</span>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="title">
          关联任务：
        </div>
        <el-table :data="tableData"
                  :highlight-current-row="true"
                  border
                  :header-cell-style="{ background: '#f5f5f5' }">
          <el-table-column prop="num"
                           label="序号"
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column prop="job_name"
                           label="任务名称"
                           align="center">
          </el-table-column>
          <el-table-column prop="job_no"
                           label="任务编号"
                           align="center">
          </el-table-column>
          <el-table-column prop="dog_name"
                           label="机器人名称"
                           align="center">
          </el-table-column>
          <el-table-column prop="dog_sn"
                           label="机器人编号"
                           align="center">
          </el-table-column>
          <el-table-column prop="inspection_start_time"
                           label="巡检开始时间"
                           show-overflow-tooltip
                width="140"
                           align="center">
          </el-table-column>
          <el-table-column prop="duration"
                           label="预计时长"
                           show-overflow-tooltip
                width="140"
                           align="center">
          </el-table-column>
          <el-table-column prop="last_exec_start_time"
                           label="上次执行时间"
                           show-overflow-tooltip
                width="140"
                           align="center">
          </el-table-column>
          <el-table-column prop="curr_exec_start_time"
                           label="本次执行时间"
                           show-overflow-tooltip
                width="140"
                           align="center">
          </el-table-column>
          <el-table-column prop="true_duration"
                           label="实际时长"
                           align="center">
          </el-table-column>
          <el-table-column prop="job_status"
                           label="任务状态"
                           align="center">
            <template slot-scope="scope">
              <span>{{scope.row.job_status == 0 ? "——":""}}</span>
            <span>{{scope.row.job_status == 1 ? "待执行":""}}</span>
            <span class="blue">{{scope.row.job_status == 2 ? "执行中":""}}</span>
            <span class="org">{{scope.row.job_status == 3 ? "暂停":""}}</span>
            <span class="red">{{scope.row.job_status == 4 ? "中止":""}}</span>
            <span class="green">{{scope.row.job_status == 5 ? "已完成":""}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="map">
        <div class="card">
          <div class="title">
            场景地图：
          </div>
          <div class="map_content">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customHeader from "@/pages/Robot/components/CustomHeader.vue";
import { patrolInspectionTaskApi } from "@/services/Robot";
export default {
  name: "patrolSceneManagementDetails",
  components: {
    customHeader
  },
  data () {
    return {
      topList: [
        {
          label: "场景名称",
          prop: "scenario_name"
        },
        {
          label: "场景编号",
          prop: "scenario_no"
        },
        {
          label: "场景下任务数",
          prop: "job_num"
        },
        {
          label: "创建时间",
          prop: "created_at"
        },
      ],
      topValue: {
      },
      tableData: [
      ],
    };
  },
  mounted() {
    console.log(window.location.search.split('=')[1]);
    const scenarioId = window.location.search.split('=')[1];
    this.handleDetail(scenarioId)
  },
  methods: {
    handleDetail(id) {
      const params = {
        scenario_id: id
      }
      patrolInspectionTaskApi.scenarioDetail({
        params: {
          ...params,
        }
      }).then((res) => {
        if(res.code == 0) {
          console.log(res, 'res111');
          this.topValue = res.data
          if(Array.isArray(res.data.job_list.list)) {
            this.tableData = res.data.job_list.list;
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .content {
    padding: 24px;

    .top {
      padding: 8px 0 31px;
      border-bottom: 1px solid #e6e6e6;

      .item_list {
        display: flex;

        .item {
          width: 250px;

          .prop {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
        }
      }
    }

    .map {
      .card {
        width: 50%;

        .map_content {
          height: 261px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("../../../assets/robot/map2.png");
        }
      }
    }

    .title {
      padding: 18px 0 23px;
      font-size: 13px;
      color: #595959;
    }
  }
}

/deep/ .el-table {
  height: 240px;
  overflow: auto;
}

.blue {
  color: #409eff;
}
.org {
  color: #f59a23;
}
.red {
  color: red;
}
.green {
  color: #70b603;
}
</style>
